<template>
  <div class="diy_card">
    <div class="diy_card_header">
      <div class="diy_card_header_left">
        <slot name="left"></slot>
      </div>
      <div class="diy_card_header_center">
        <slot name="title"></slot>
      </div>
      <div class="diy_card_header_right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="diy_card_content">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="less">
.diy_card{
  height: auto;
  border: 1px solid #f0f0f0;
  .diy_card_header{
    background: #ffff;
    height: auto;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    .diy_card_header_center{
      flex: 1;
    }
  }
  .diy_card_content{
    padding: 10px;
  }
}
</style>